<template>
  <div class="header-container">
    <el-row>
      <el-col :span="6">
        <h3 class="title">Form Builder</h3>
      </el-col>
      <el-col :span="18">
        <div class="setting-container">
          <div class="setting-item" @click="jsonVisible=true">
            <i class="el-icon-tickets"></i>
            <span>JSON</span>
          </div>
          <div class="setting-item" @click="dialogFormVisible=true">
            <i class="el-icon-setting"></i>
            <span>设置</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="JSON数据" :visible.sync="jsonVisible">
      <json-viewer
        :value="form"
        :expand-depth=4
        :preview-mode="true"
        copyable
        boxed></json-viewer>
    </el-dialog>
    <el-dialog title="表单设置" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="表单名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="标签位置" prop="labelPosition">
          <el-select v-model="form.labelPosition" placeholder="请选择标签位置">
            <el-option label="right" value="right"></el-option>
            <el-option label="left" value="left"></el-option>
            <el-option label="top" value="top"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSetForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import JsonViewer from 'vue-json-viewer'
    import Vue from 'vue';
    import {Row, Col, Dialog, Form, FormItem, Input, Select, Option,Button} from 'element-ui';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Dialog);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Button);
    Vue.use(JsonViewer);

    export default {
        name: 'Header',
        data() {
            return {
                jsonVisible: false,
                dialogFormVisible: false
            }
        },
        props: {
            form: {
                type: Object,
                default: () => {
                  return {}
                }
            }
        },
        methods: {
            /**
             * 设置表单
             */
            handleSetForm() {
                console.log(this.form);
                this.dialogFormVisible = false;
                this.$emit('handleSetForm', this.form);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import "header";
</style>
